<template>
  <div class="biaoxun">
    <div class="biaoxunZs">
      <span class="zhongshi"></span>
      <span class="biaoxunZt">筛选条件</span>
    </div>
    <div style="margin-top: 40px">
      <div>
        <div class="biaoxunTou">关键词</div>
        <div style="display: flex; align-items: center">
          <div>
            <el-input class="lookSth" v-model="dataService.title" placeholder="请输入公司名称关键词或公司完整名称，多个用空格隔开" />
          </div>
          <div style="margin-left: 40px">
            <el-dropdown trigger="click" ref="dropdown1">
              <span class="el-dropdown-link">
                <span>{{ sizes1 }}</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <div class="infOne">
                    <el-radio-group v-model="dataService.checkList" class="ml-[4px]">
                      <div class="infOne_hove" v-for="city in realm" :key="city.id">
                        <el-radio :label="city.id" :value="city.id">{{
              city.name
            }}</el-radio>
                      </div>
                    </el-radio-group>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="mt30" style="padding-right: 15px">
      <div>项目发布时间</div>
      <div class="mt10">
        <el-radio-group v-model="dataService.timesId">
          <el-radio v-for="item in shortcuts" :key="city" :label="item.id" @change="radioChange(item.id)">{{ item.text
            }}</el-radio>
          <el-date-picker v-model="time" type="daterange" format="YYYY/MM/DD" value-format="x" range-separator="-"
            start-placeholder="开始时间" end-placeholder="结束时间" :size="size" @change="timeChange" />
        </el-radio-group>
      </div>
    </div>
    <diqu ref="quangDq" />
    <div v-if="flg">
      <div class="mt30">
        <div>采购商类型</div>
        <div class="mt10">
          <el-checkbox-group v-model="dataService.Boos">
            <el-checkbox v-for="city in biddingBoos" :key="city" :label="city.id">{{ city.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="greater" @click="greaterClick">
      <span style="margin-right: 10px">{{ flg ? "收起更多" : "更多筛选" }}
      </span>
      <img v-if="flg" style="width: 8px; height: 12px" src="@/assets/img/路径 4509.png" alt="" />
      <img v-else style="width: 8px; height: 12px" src="@/assets/img/路径 4556.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import diqu from "../diqu/index.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { useRadio1Store } from "@/pain/search/search";
const signalsRadio1 = useRadio1Store();
const quangDq = ref();
let time = ref([]);
let flg = ref(false);
const greaterClick = () => {
  flg.value = !flg.value;
};
let dataService = reactive({
  title: "",
  checkList: "1",
  times: [
    {
      oneTime: "",
      twoTime: "",
    },
  ],
  Boos: [],
  matching: "",
});
signalsRadio1.T_buyer = dataService;
const realm = ref([
  {
    id: "1",
    name: "公司名称",
  },
  {
    id: "2",
    name: "产品",
  },
  {
    id: "3",
    name: "品牌",
  },
]);
const dropdown1 = ref();
let sizes1 = ref("全部关键词位置");


// 时间
const shortcuts = [
  {
    id: "0",
    text: "全部",
  },
  {
    id: "1",
    text: "今天",
  },
  {
    id: "2",
    text: "昨天",
  },
  {
    id: "3",
    text: "近一周",
  },
  {
    id: "4",
    text: "近一个月",
  },
  {
    id: "5",
    text: "近三个月",
  },
  {
    id: "6",
    text: "近六个月",
  },
  {
    id: "7",
    text: "近一年",
  },
  {
    id: "8",
    text: "自定义",
  },
];
const timeChange = (value) => {
  const dateObject1 = new Date(value[0]);
  let seconds1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(value[1]);
  let seconds2 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times[0] = [
    {
      oneTime: seconds1,
      twoTime: seconds2,
    },
  ];
};
const jintain = () => {
  const today = new Date();
  const start = new Date(today);
  start.setHours(0, 0, 0, 0); // 设置为当天的零点
  const end = new Date(today);
  end.setHours(23, 59, 59, 999); // 设置为当天的最后一刻

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};

const zuotain = () => {
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1); // 设置为昨天
  const start = new Date(yesterday);
  start.setHours(0, 0, 0, 0); // 设置为昨天的零点
  const end = new Date(yesterday);
  end.setHours(23, 59, 59, 999); // 设置为昨天的最后一刻

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};
const jinyizhou = () => {
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};

const jinyiyue = () => {
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};

const jinsanyue = () => {
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};

const jinliuyue = () => {
  const end = new Date(); // 当前时间
  const start = new Date(); // 过去六个月的时间
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); // 90天前，即过去六个月

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};
const jinyinian = () => {
  const end = new Date(); // 当前时间
  const start = new Date(); // 近一年的时间
  start.setFullYear(end.getFullYear() - 1); // 设置起始日期为当前日期的前一年

  const dateObject1 = new Date(start);
  let start1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(end);
  let end1 = Math.floor(dateObject2.getTime() / 1000);
  dataService.times = [
    {
      oneTime: start1,
      twoTime: end1,
    },
  ];
};

const radioChange = (id) => {
  if (id == "1") {
    jintain();
  } else if (id == "2") {
    zuotain();
  } else if (id == "3") {
    jinyizhou();
  } else if (id == "4") {
    jinyiyue();
  } else if (id == "5") {
    jinsanyue();
  } else if (id == "6") {
    jinliuyue();
  } else if (id == "7") {
    jinyinian();
  } else if (id == "0") {
    dataService.times[0] = [
      {
        oneTime: 0,
        twoTime: 0,
      },
    ];
  }
};

// 招标公司类型
let biddingBoos = ref([
  {
    id: "1",
    name: "国有企业",
  },
  {
    id: "2",
    name: "通讯运营商",
  },
  {
    id: "3",
    name: "军队",
  },
  {
    id: "4",
    name: "银行",
  },
  {
    id: "5",
    name: "证券",
  },
  {
    id: "6",
    name: "保险",
  },
  {
    id: "7",
    name: "民营企业",
  },
  {
    id: "8",
    name: "医院",
  },
  {
    id: "9",
    name: "政府及事业单位",
  },
  {
    id: "10",
    name: "学校",
  },
  {
    id: "11",
    name: "其他",
  },
]);

// 品配模式
let quality = [
  {
    id: "1",
    name: "智能",
  },
  {
    id: "2",
    name: "精准",
  },
  {
    id: "3",
    name: "模糊",
  },
];
const dataCgs = () => {
  dataService.title = "";
  dataService.checkList = "";
  // dataService.keywords = ''
  // dataService.keyList = []
  // dataService.excluded = ''
  // dataService.excludedList = []
  dataService.timesId = "";
  dataService.times = [
    {
      oneTime: "",
      twoTime: "",
    },
  ];
  dataService.Boos = [];
  dataService.matching = "";
  signalsRadio1.leave.leave = [];
  signalsRadio1.market.market = [];
  signalsRadio1.quarter.quarter = [];
  signalsRadio1.T_buyer = dataService;
};
defineExpose({ dataCgs, dataService });
onMounted(() => { });
</script>

<style lang="scss" scoped>
.mt30 {
  margin-top: 30px;
}

.mt10 {
  margin-top: 10px;
}

.greater {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 84px;
  font-size: 14px;
  color: red;
}

.guanjianzi {
  max-width: 100px;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.biaoxun {
  padding: 20px 0 67px 20px;

  .biaoxunZs {
    display: flex;
    margin-bottom: 22px;

    .zhongshi {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background-color: red;
      border-radius: 10px;
    }

    .biaoxunZt {
      font-size: 16px;
      color: #333333;
    }
  }

  .biaoxunTou {
    margin-bottom: 15px;
    font-size: 14px;
    color: #333333;

    .biaoxunShu {
      margin-left: 10px;
      color: #6675ff;
    }
  }

  .lookSth {
    width: 500px;
    margin-right: 15px;
  }
}

.infOne {
  width: 220px;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: scroll;

  .infOne_hove {
    display: flex;
    height: 40px;
    align-items: center;
    padding-left: 15px;

    &:hover {
      // background-color: #6675FF;
    }
  }
}

.search_money {
  display: flex;
  align-items: center;
  width: 150px;
  padding-left: 10px;

  .search_mput {
    width: 100px;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
    border-radius: 4px;
    border: 1px solid #9a9898;
    font-size: inherit;
    outline: none;
  }
}

.dropdownButtom {
  width: 200px;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #e8e8e8;
  padding-right: 10px;
}

::v-deep .el-button {
  color: aliceblue;
}

::v-deep .el-dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 220px;
  height: 36px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 36px;
  border-radius: 4px;
  border: 1px solid #dddddd !important;
  font-size: 14px;
  color: #333333;
}

.el-radio-group {
  display: block;
  flex-wrap: nowrap;
  font-size: 16px;
}

::v-deep .el-radio {
  margin-right: 25px !important;
}
</style>
